<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>filter和map和reduce高阶函数</title>
</head>
<body>

<div id="app">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const numbers = [10, 20, 30, 40, 50, 111, 222, 40, 50]

  //
  //■filter方法，filter会遍历numbers，每次传入遍历的当前值，回调函数返回是boolean值，返回true的话，会将value装进返回的数组中，返回false则不会将值装入返回数组
  let low100Numbers = numbers.filter(function (value) {
    return value < 100;
  })

  //■map方法，循环遍历数组，每次会将返回的值装入接收的数组中
  let low100Numbers2 = low100Numbers.map(function (number) {
    return number * 2
  })

  //■reduce方法,遍历数组，每次向回调函数中，传入前一次回调返回值和当前遍历值，最后方法返回最后一次回调函数返回的值
  //传入0是初始化的意思，也就是第一次previousValue = 0，currentValue等于当前循环的值
  let total = low100Numbers2.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue
  }, 0)

  // 上面的三个可以简写为函数链式写法
  let total = numbers.filter(function (value) {
    return value < 100;
  }).map(function (number) {
    return number * 2
  }).reduce(function (previousValue, currentValue) {
    return previousValue + currentValue
  }, 0)

  // 上面的三个可以简写为箭头函数链式写法
  let total = numbers.filter(value => {
    return value < 100;
  }).map(number => {
    return number * 2
  }).reduce((previousValue, currentValue) => {
    return previousValue + currentValue
  }, 0)

  // 这种简写的写法就是函数式编程的优势

</script>
</body>
</html>